<template>
	<view class="order-commission">
		<!-- 头部业务名称 -->
		<view class="user" v-if="website">
			<image class="user-avatar" :src="website.headimg" mode="aspectFit"></image>
			<view class="">
				<view class="user-name">{{website.name}}</view>
				<view class="user-grade">{{website.type_name}}</view>
			</view>
		</view>
		<!-- 搜索 -->
		<picker class="sitepicker" mode="selector" :range="stores" range-key="site_name" @change="changeStore">
			<view class="select flex-between">
				<view class="select-input">{{currentStore.name || '全部店铺'}}</view>
				<view class="select-icon"></view>
			</view>
		</picker>
		<!-- 数据总览 -->
		<view class="summary">
			<view class="summary-head">
				<view class="summ-title">数据概况</view>
				<view class="month-picker" @click="showMonthPicker">
					<view class="month-data">{{period[0]}}年{{period[1]}}月</view>
					<view class="month-icon"></view>
				</view>
			</view>
			<view class="stats">
				<view class="stats-item" v-for="(item,index) in statsFields" :key="index">
					<view class="stats-title">{{item.title}}</view>
					<view class="stats-value">{{statsData[item.index]}}</view>
				</view>
			</view>
		</view>
		<!-- 列表切换 -->
		<view class="tab">
			<view class="tab-item" :class="{active:item.value === navValue}" v-for="item in navs" :key="item.value"
				@click="turnTab(item.value)">
				{{item.title}}
			</view>
		</view>
		<!-- 列表 -->
		<view class="order-list" v-if="list.length > 0">
			<view class="order-item" v-for="(item,index) in list" :key="item.id">
				<view class="order-head">
					<view class="order-store">
						<view class="store-icon"></view>
						<view class="store-name">{{item.site_name}}</view>
					</view>
					<view class="order-status" :class="item.status ? 'status-'+item.status : ''">{{item.status_text}}</view>
				</view>
				<!-- 线上订单商品信息 -->
				<view class="order-products" v-if="item.goods">
					<view class="product flex-between">
						<image class="product-image" :src="item.goods.sku_image" mode="scaleToFill"></image>
						<view class="product-info">
							<view class="flex-between-top">
								<view class="product-name">{{item.goods.sku_name}}</view>
								<view class="flex-column-right">
									<view class="product-price">¥{{item.goods.price}}</view>
									<view class="product-num">x{{item.goods.num}}</view>
								</view>
							</view>
							<!-- <view class="product-commission flex-right">佣金预计<view class="commission-value">¥{{item.account}}</view>
							</view> -->
						</view>
					</view>
				</view>
				<view class="order-info">
					<view class="order-sn">订单号：{{item.order_no}}</view>
					<view class="order-money">订单总金额：¥{{item.amount}}</view>
					<view class="flex-between">
						<view class="order-time">下单时间：{{item.create_time}}</view>
						<view class="comssion flex-right">佣金<view class="commssion-value">¥{{item.account}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<ns-empty v-else text="暂无佣金信息" :fixed="!1" :isIndex="!1"></ns-empty>
		
		<month-picker ref="monthPicker" @onConfirm="confirmMonth"></month-picker>
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
	import monthPicker from './components/diy-month-picker/diy-month-picker.vue';
	export default {
		components: {
			monthPicker
		},
		data() {
			return {
				stores: [],
				period: [],
				currentStore: {},
				statsFields: [{
					title: '线上订单数',
					index: 'order_total_num'
				}, {
					title: '线上总金额(元)',
					index: 'order_total_amount'
				}, {
					title: '线上佣金(元)',
					index: 'order_total_account'
				}, {
					title: '线下订单数',
					index: 'collection_total_num'
				}, {
					title: '线下总金额(元)',
					index: 'collection_total_amount'
				}, {
					title: '线下佣金(元)',
					index: 'collection_total_account'
				}, {
					title: '开店订单数',
					index: 'shop_total_num'
				}, {
					title: '开店总金额(元)',
					index: 'shop_total_amount'
				}, {
					title: '开店佣金(元)',
					index: 'shop_total_account'
				}],
				statsData: {},
				navs: [{
					title: '线上',
					value: '1'
				}, {
					title: '线下',
					value: '2'
				}, {
					title: '开店',
					value: '3'
				}],
				navValue: '1',
				list: [],
				page: 1,
				page_size: 10,
				page_count: 1,
				site_id: '',
				business_id: '',
				website: ''
			}
		},
		computed: {
			statusClass(state) {
				return 'status-' + state;
			}
		},
		methods: {			
			changeStore(e) {
				let target = this.stores[e.detail.value];
				this.currentStore = target;
				this.site_id = target.site_id;
				this.resetPage();
			},
			turnTab(value) {
				this.navValue = value;
				this.page = 1;
				this.list = [];
				this.getCommission();
			},
			showMonthPicker() {
				this.$refs.monthPicker.show()
			},
			confirmMonth(data){
				this.period = data.split('-');	
				this.resetPage();
			},
			resetPage() {
				this.page = 1;
				this.list = [];
				this.getCommissionSum();
				this.getCommission();
			},
			getShopName() {
				this.$api.sendRequest({
					url: '/city/api/index/getShopName',
					data: {
						business_id: this.business_id
					},
					success: res => {
						this.website = res.data.website;
						this.stores = res.data.shop_list;
					}
				});
			},
			getCommissionSum() {
				this.$api.sendRequest({
					url: '/city/api/index/getCommissionSum',
					data: {
						type: this.navValue,
						date: this.period.join('-'),
						site_id: this.site_id,
						business_id: this.business_id
					},
					success: res => {
						this.statsData = res.data;
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					},
					fail: res => {
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				});
			},
			getCommission() {
				this.$api.sendRequest({
					url: '/city/api/index/getCommission',
					data: {
						type: this.navValue,
						page: this.page,
						page_size: this.page_size,
						date: this.period.join('-'),
						site_id: this.site_id,
						business_id: this.business_id
					},
					success: res => {
						let newArr = [];
						newArr = res.data.list;
						this.list = this.list.concat(newArr);
						this.page_count = res.data.page_count;
					}
				});
			},
			nextPage() {
				if (this.page < this.page_count) {
					this.page++;
					this.getCommission();
				}
			},
		},
		onLoad(option) {
			// 初始化时间
			let today = new Date();
			let year = today.getFullYear();
			let month = today.getMonth() + 1;
			this.period = [year, month];
			this.business_id = option.business_id || '';
			this.getCommissionSum();
			this.getCommission();
			this.getShopName();
		},
		onReachBottom() {
			this.nextPage();
		}
	}
</script>

<style lang="scss" scoped>
	@import '../common/css/mixins.scss';
	$colorRed:#FF4544;

	@mixin box {
		background-color: #fff;
		border-radius: 8rpx;
		margin: 30rpx 0;
	}

	.flex-between {
		@include flex(space-between);
	}

	.flex-left {
		@include flex(flex-start);
	}

	.flex-right {
		@include flex(flex-end);
	}

	.flex-between-top {
		@include flex(space-between, flex-start)
	}

	.flex-column-right {
		@include flex(flex-end, flex-end, column);
	}

	.user {
		@include flex(flex-start);
		margin-top: 18rpx;
	
		.user-avatar {
			margin-right: 20rpx;
			width: 120rpx;
			height: 120rpx;
			border-radius: 120rpx;
			border: 2rpx solid #fff;
			background-color: #f8f8f8;
		}
	
		.user-name {
			font-size: 32rpx;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 45rpx;
		}
	
		.user-grade {
			margin-top: 12rpx;
			font-size: 24rpx;
			color: #FFFFFF;
			line-height: 33rpx;
		}
	}
	
	.sitepicker {
		margin-top: 30rpx;
	}

	.order-commission {
		padding: 30rpx;
		width: 750rpx;
		background-image: linear-gradient(360deg, #F8F8F8 0%, $colorRed 100%);
		background-color: #f8f8f8;
		background-size: 100% 700rpx;
		background-repeat: no-repeat;
		background-color: #f8f8f8;
	}

	.select {
		padding: 0 30rpx;
		width: 690rpx;
		height: 70rpx;
		background: #FFFFFF;
		border-radius: 35rpx;

		.select-input {
			font-size: 28rpx;
			color: #303133;
			line-height: 40rpx;
		}

		.select-icon {
			@include image('icon-arrow-top.png');
			transform: rotate(180deg);
			width: 32rpx;
			height: 32rpx;
		}
	}

	.summary {
		@include box;
		padding: 30rpx;

		.summary-head {
			@include flex(space-between);

			.summ-title {
				font-size: 32rpx;
				font-family: Helvetica;
				color: #303133;
				line-height: 46rpx;
			}

			.month-picker {
				@include flex(space-between);
				width: 220rpx;
				height: 50rpx;
				padding: 0 16rpx;
				background: rgba(255, 69, 68, 0.1);
				border-radius: 28rpx;

				.month-data {
					font-size: 24rpx;
					color: #303133;
					line-height: 33rpx;
				}

				.month-icon {
					@include image('icon-arrow-top.png');
					transform: rotate(180deg);
					width: 32rpx;
					height: 32rpx;
				}
			}

		}

		.stats {
			@include flex(space-between);
			margin-right: 70rpx;

			&:nth-child(3n) {
				margin-right: 0;
			}

			flex-wrap: wrap;

			.stats-item {
				margin-top: 47rpx;

				.stats-title {
					font-size: 28rpx;
					color: #909399;
					line-height: 40rpx;
				}

				.stats-value {
					margin-top: 12rpx;
					font-size: 36rpx;
					font-family: Helvetica;
					color: #303133;
					line-height: 43rpx;
				}
			}

		}
	}

	.tab {
		@include box;
		@include flex;
		height: 90rpx;

		.tab-item {
			
			height: 100%;
			@include flex(center, center, column);
			flex-grow: 2;
			font-size: 28rpx;
			color: #303133;
			line-height: 40rpx;

			&.active {
				position: relative;
				color: $colorRed;

				&::after {
					content: '';
					position: absolute;
					bottom: 0;
					width: 92rpx;
					height: 4rpx;
					background-color: $colorRed;
				}
			}
		}
	}

	.order-list {}

	.order-item {
		@include box;
		padding: 30rpx;

		.order-head {
			@include flex(space-between);

			.order-store {
				@include flex(flex-start);

				.store-icon {
					width: 40rpx;
					height: 40rpx;
					@include image('icon-store.png');
				}

				.store-name {
					margin-left: 8rpx;
					font-size: 28rpx;
					color: #303133;
					line-height: 40rpx;
				}
			}

			.order-status {
				font-size: 24rpx;
				color: #303133;
				line-height: 34rpx;
				
				&.status-1 {
					color: #0078FF;
				}
				&.status-2 {
					color: #12D0AE;
				}
				&.status-3 {
					color: #FF4544;
				}
			}
		}

		.order-products {
			.product {
				border-radius: 8rpx;
				overflow: hidden;
				margin-top: 30rpx;

				background: #F8F8F8;

				.product-image {
					position: relative;
					// border: 1rpx solid #000;
					flex-shrink: 0;
					width: 160rpx;
					height: 160rpx;
					border-radius: 8rpx;

					&.debted {
						&::after {
							position: absolute;
							left: 0;
							bottom: 0;
							@include flex;
							content: '已结算';
							width: 100%;
							height: 40rpx;
							background: rgba(48, 49, 51, 0.5);
							font-size: 24rpx;
							color: #fff;

							// border-radius: 0px 0px 8px 8px;
						}
					}
				}

				.product-info {
					padding: 16rpx 30rpx 16rpx 20rpx;
				}

				.product-name {
					width: 308rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					font-size: 28rpx;
					color: #303133;
					line-height: 40rpx;
				}

				.product-price {
					font-size: 28rpx;
					color: #303133;
					line-height: 28rpx;

					&::first-letter {
						font-size: 20rpx;
					}
				}

				.product-num {
					font-size: 24rpx;
					color: #909399;
					line-height: 24rpx;
				}

				.product-commission {
					margin-top: 30rpx;
					font-size: 24rpx;
					color: #909399;
					line-height: 34rpx;

					.commission-value {
						margin-left: 8rpx;
						color: $colorRed;
					}
				}
			}
		}


		.order-info {
			margin-top: 30rpx;

			.order-sn,
			.order-time,
			.comssion {
				font-size: 24rpx;
				color: #909399;
				line-height: 34rpx;
			}
			.order-money {
				margin-top: 10rpx;
				font-size: 24rpx;
				color: #909399;
				line-height: 34rpx;
			}

			.order-time {}

			.comssion {
				.commssion-value {
					margin-left: 8rpx;
					color: $colorRed;
				}
			}
		}
	}
</style>
